import React from 'react';
import { Table, type TableProps, Card, Input, Button, Space, Row, Col } from 'antd';
import { SearchOutlined, ReloadOutlined, PlusOutlined } from '@ant-design/icons';
import { PrimaryButton } from '../../ui/Button/PrimaryButton';
const { Search } = Input;

interface SearchTableProps<T> {
  // 表格属性
  columns: TableProps<T>['columns'];
  dataSource: TableProps<T>['dataSource'];
  loading?: TableProps<T>['loading'];
  pagination?: TableProps<T>['pagination'];
  rowKey?: TableProps<T>['rowKey'];

  // 自定义属性
  tableTitle?: string;
  onSearch?: (value: string) => void;
  onAdd?: () => void;
  onRefresh?: () => void;
  searchPlaceholder?: string;
}

export const SearchTable = <T extends object>({
  tableTitle,
  onSearch,
  onAdd,
  onRefresh,
  searchPlaceholder = "搜索...",
  columns,
  dataSource,
  loading,
  pagination,
  rowKey,
  ...tableProps
}: SearchTableProps<T>) => {
  return (
    <Card>
      <Row justify="space-between" align="middle" style={{ marginBottom: 16 }}>
        <Col>
          {tableTitle && <h3 style={{ margin: 0 }}>{tableTitle}</h3>}
        </Col>
        <Col>
          <Space>
            <Search
              placeholder={searchPlaceholder}
              onSearch={onSearch}
              style={{ width: 300 }}
              allowClear
            />
            {onRefresh && (
              <Button
                icon={<ReloadOutlined />}
                onClick={onRefresh}
              >
                刷新
              </Button>
            )}
            {onAdd && (
              <PrimaryButton
                type="primary"
                icon={<PlusOutlined />}
                onClick={onAdd}
              >
                新增
              </PrimaryButton>
            )}
          </Space>
        </Col>
      </Row>

      <Table<T>
        columns={columns}
        dataSource={dataSource}
        loading={loading}
        pagination={pagination}
        rowKey={rowKey}
        scroll={{ x: 800 }}
        {...tableProps}
      />
    </Card>
  );
};